// 轮播
const captionsEl = document.querySelectorAll('.slide-caption')
const glide = new Glide('.glide', {
	type: 'carousel',
	// autoplay: 10000,
})

glide.on(['mount.after', 'run.after'], () => {
	const caption = captionsEl[glide.index]

	anime({
		targets: caption.children,
		opacity: [0, 1],
		duration: 300,
		easing: 'linear',
		delay: anime.stagger(500, { start: 300 }),
		translateY: [anime.stagger([50, 10]), 0],
	})
})

glide.on('run.before', () => {
	document
		.querySelectorAll('.slide-caption > *')
		.forEach((el) => (el.style.opacity = 0))
})

glide.mount()

// isotope

const isotope = new Isotope('.cases', {
	layoutMode: 'fitRows',
	itemSelector: '.case',
})

filterbtns.addEventListener('click', (event) => {
	const { target } = event
	const filter = target.dataset.filter

	if (filter) {
		document
			.querySelectorAll('.filter-btn.active')
			.forEach((item) => item.classList.remove('active'))
		target.classList.add('active')
		isotope.arrange({ filter })
	}
})
